<template>
  <div class="pricing">
    <a-page-header
      title="价格管理"
      sub-title="商品定价策略管理"
    />

    <a-card>
      <a-table
        :columns="columns"
        :data-source="pricings"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'costPrice'">
            ¥{{ record.costPrice }}
          </template>
          <template v-else-if="column.key === 'salePrice'">
            ¥{{ record.salePrice }}
          </template>
          <template v-else-if="column.key === 'profit'">
            {{ record.profit }}%
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">调价</a-button>
              <a-button type="link" size="small">历史</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const columns = [
  { title: '商品名称', dataIndex: 'productName', key: 'productName' },
  { title: '商品编码', dataIndex: 'productCode', key: 'productCode' },
  { title: '成本价', dataIndex: 'costPrice', key: 'costPrice' },
  { title: '销售价', dataIndex: 'salePrice', key: 'salePrice' },
  { title: '毛利率', dataIndex: 'profit', key: 'profit' },
  { title: '最后调价时间', dataIndex: 'lastUpdate', key: 'lastUpdate' },
  { title: '操作', key: 'action', width: 150 },
]

const pricings = ref([
  {
    productName: '苹果 红富士',
    productCode: 'APPLE001',
    costPrice: 8.5,
    salePrice: 12.8,
    profit: 33.6,
    lastUpdate: '2024-01-10'
  },
  {
    productName: '香蕉',
    productCode: 'BANANA001',
    costPrice: 4.2,
    salePrice: 6.8,
    profit: 38.2,
    lastUpdate: '2024-01-08'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})
</script>

<style scoped>
.pricing {
  padding: 24px;
}
</style>